page {
  height: 100%;
}
.container {
  height: 100%;
  background-color: #e5e5e5;
  .topTypeTitle {
    width: 100%;
    height: 84rpx;
    background: #fb7a42;
    box-sizing: border-box;
    padding: 24rpx 0 24rpx 24rpx;
    .topTypeTitleContext {
      font-size: 36rpx;
      line-height: 36rpx;
      color: #ffffff;
    }
  }
  .mainContainer {
    width: 100%;
    padding: 24rpx 24rpx 0 24rpx;
    padding-bottom: 96rpx;
    .line {
      width: 654rpx;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }
    .orderDetails {
      width: 100%;
      padding: 24rpx;
      background-color: #ffffff;
      border-radius: 12rpx 12rpx 0px 0px;
      .order_topTitle {
        font-size: 32rpx;
        line-height: 32rpx;
      }

      .package_1 {
        margin-top: 24rpx;
        display: flex;
        .package_1_left {
          font-size: 24rpx;
          line-height: 24rpx;
          margin-left: -12rpx;
          color: #fa8c16;
        }
        .package_1_right {
          margin-left: 12rpx;
          font-size: 24rpx;
          line-height: 24rpx;
          color: #8c8c8c;
        }
      }
      .orderList {
        margin-top: 24rpx;
        .orderItem {
          display: flex;
          align-items: center;
          .order_img {
            width: 96rpx;
            height: 96rpx;
          }
          .order_text {
            font-size: 32rpx;
            line-height: 32rpx;
            margin-left: 24rpx;
          }
          .order_numBox {
            margin-left: 110rpx;
            display: flex;
            .numBox_left {
              font-size: 28rpx;
              line-height: 28rpx;
              color: #8c8c8c;
            }
            .numBox_right {
              margin-left: 12rpx;
              font-size: 28rpx;
              line-height: 28rpx;
              color: #8c8c8c;
            }
          }
          .priceBox {
            margin-left: auto;
            font-size: 28rpx;
            line-height: 28rpx;
          }
        }
      }
      .packup {
        margin-top: 24rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        text-align: center;
        color: #8c8c8c;
      }
      .tipBox {
        padding-top: 24rpx;
        padding-bottom: 24rpx;
        .tipBox_top {
          display: flex;
          font-size: 24rpx;
          line-height: 24rpx;
          color: #121b36;
          .tipBox_top_right {
            margin-left: auto;
          }
        }
      }
      .priceBox {
        padding-top: 28rpx;
        padding-bottom: 24rpx;
        .priceBox_top {
          line-height: 24rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          display: flex;
          .priceBox_top_right {
            margin-left: auto;
          }
        }
        .totalPrice {
          margin-top: 24rpx;
          text-align: right;
        }
      }
    }
    .contactBox {
      width: 100%;
      height: 96rpx;
      position: relative;
      background: #fff6f2;
      border-radius: 0px 0px 12rpx 12rpx;
      .contactLeft {
        font-size: 24rpx;
        line-height: 24rpx;
        top: 24rpx;
        left: 98rpx;
        position: absolute;
        display: flex;
        align-items: center;
        .onlineImg {
          width: 48rpx;
          height: 48rpx;
        }
      }
      .contactRight {
        font-size: 24rpx;
        line-height: 24rpx;
        position: absolute;
        display: flex;
        align-items: center;
        right: 98rpx;
        top: 24rpx;
        .onlineImg {
          width: 48rpx;
          height: 48rpx;
        }
      }
      .line {
        width: 0.3rpx;
        height: 48rpx;
        position: absolute;
        top: 24rpx;
        left: 355rpx;
      }
    }
    .orderInfo {
      margin-top: 24rpx;
      border-radius: 12rpx 12rpx 0px 0px;
      padding: 24rpx;
      background-color: #ffffff;
      .topTitle {
        font-size: 32rpx;
        line-height: 32rpx;
      }
      .infoBox {
        padding-top: 24rpx;
        .infoItem:first {
          margin-top: 0;
        }
        .infoItem {
          display: flex;
          margin-top: 24rpx;
          .item_left {
            line-height: 24rpx;
            font-size: 24rpx;
            color: #121b36;
          }
          .item_right {
            margin-left: auto;
            line-height: 24rpx;
            font-size: 24rpx;
            color: #8c8c8c;
            .btn {
              font-size: 20rpx;
              line-height: 20rpx;
              color: #8c8c8c;
              padding: 4rpx 10rpx 4rpx 10rpx;
              box-sizing: border-box;
              border: 0.6px solid #8c8c8c;
              border-radius: 2px;
              margin-left: 12rpx;
            }
          }
          .flex {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .paybackBtn {
      margin-top: 48rpx;
      padding: 20rpx 275rpx 20rpx 280rpx;
      border: 2rpx solid #fb7a42;
      box-sizing: border-box;
      border-radius: 12rpx;
      font-size: 36rpx;
      line-height: 36rpx;
      color: #fb7a42;
    }
  }
}
.logistics {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  .mainBox {
    width: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    padding-left: 32rpx;
    padding-right: 24rpx;
    padding-bottom: 30rpx;
    .closeIconBox {
      padding-top: 4rpx;
      .closeIcon:first {
        margin-top: 0;
      }
      .closeIcon {
        margin-left: auto;
        margin-right: auto;
        width: 80rpx;
        height: 4rpx;
        background: #dddddd;
        border-radius: 2rpx;
        margin-top: 4rpx;
      }
    }
    .orderTitle {
      display: flex;
      align-items: center;
      margin-top: 36rpx;
      .title_left {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #121b36;
      }
      .title_center {
        font-size: 24rpx;
        line-height: 24rpx;
        color: #121b36;
        margin-left: 60rpx;
      }
      .title_right {
        margin-left: auto;
        padding: 4rpx 10rpx 4rpx 10rpx;
        background: #f9f9f9;
        border: 0.6px solid #8c8c8c;
        font-size: 20rpx;
        line-height: 20rpx;
        border-radius: 4rpx;
        box-sizing: border-box;
      }
    }
    .recordBox {
      margin-top: 24rpx;
      .recordItem:first-child {
        .addressBox {
          padding-top: 0;
        }
        .timeBox {
          padding-top: 0;
        }
      }
      .recordItem {
        display: flex;
        box-sizing: border-box;
        .timeBox {
          padding-top: 24rpx;
          width: 100rpx;
          height: 72rpx;
          text-align: center;
          font-size: 24rpx;
        }
        .addressBox {
          margin-left: 32rpx;
          border-left: 1px solid rgba(0, 0, 0, 0.06);
          padding-left: 24rpx;
          padding-top: 24rpx;
          .state {
            font-size: 28rpx;
            line-height: 150%;
            color: #8c8c8c;
          }
          .arrive {
            color: #fb7a42;
          }
          .addressInfo {
            font-size: 24rpx;
            line-height: 150%;
          }
        }
      }
    }
  }
}
